<%@ include file="/WEB-INF/jsp/include/head.jsp" %><%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>geeksaga sns facebook</title>
    <style type="text/css">
			.border {
				border-bottom: 1px solid gray
			}
			.status {
				font:1.15em/1.1 'Lucida Grande',sans-serif;
				height:2.5em;
				overflow:auto;
				width:600px;
			}
			.more {
				background-color:#FFFFFF;
				background-image:url("http://s.twimg.com/a/1278188204/images/more.gif");
				background-position:left top;
				background-repeat:repeat-x;
				border-color:#DDDDDD #AAAAAA #AAAAAA #DDDDDD;
				border-style:solid;
				border-width:1px;
				display:block;
				font-size:14px;
				font-weight:bold;
				height:22px;
				line-height:1.5em;
				margin-bottom:6px;
				outline:medium none;
				padding:6px 0;
				text-align:center;
				text-shadow:1px 1px 1px #FFFFFF;
				width:543px;
			}
		</style>
  </head>
  <body>
    <h1>geeksaga sns facebook</h1>
    <table>
    	<tr>
    		<td>My profile</td>
    	</tr>
    	<tr valign="bottom">
    		<td><img src=${myPicSrc} width='50px' height='50px' /><a href=${myProfileLink} target="blank">${myName}</a></td>
    		<td><textarea id="facebook_stream_textarea" name="facebook_stream_textarea" rows="3" style="width:300px"></textarea></td>
    		<td><input type="button" value="share" onclick="javascript:postShare();"></td>
    	</tr>
    </table>
    
    <hr>
    <div style="width:600px">
    	<div>most recent</div>
    	<div id="facebookContents">
	    	<c:forEach items="${recentMessage}" var="message">
	    		<div style="display:block;border-top-style:solid;border-top-color:#EEE;border-tio-width:1px;margin-bottom:7px;min-height:50px;padding:7px 0px 0px 60px;position:relative;">
		    		<img style="left:0px;position:absolute;" src='${message.pic}' width='50px' height='50px' />
		    		<div style="display:block;">
		    			<h3 style="font-size:13px;font-weight:normal;">
		    				<a href='${message.url}'>${message.name}</a>&nbsp;&nbsp;${message.message}
		    			</h3>
		    		</div>
		    		<c:if test="${message.attachment!=null}">
		    			<c:forEach items="${message.attachment}" var="attachment">
		    				<div>
								<c:if test="${attachment.src!=null}">
									<img src="${attachment.src}">
								</c:if>	
								<a href="${attachment.href}" >${attachment.name}</a><br>${attachment.description}
		    				</div>
			    		</c:forEach>
		    		</c:if>
		    		<div>
		    			${message.updated_time}&nbsp;&nbsp;<a href="javascript:getCommentList('${message.postid}')">comment(${message.commentCount})</a>
		    		</div>
		    		<div id="${message.postid}"></div>
	    		</div>
	    	</c:forEach>
    	</div>
    </div>
    <a id="more" href="#" class="more" onclick="getNextData(); return false;">More</a>
    <hr>
    <table>
    	<tr>
    		<td>friend list</td>
    	</tr>
    	<c:forEach items="${friendArray}" var="friend">
    		<tr>
    			<td>
    				<img src='${friend.pic}' width='50px' height='50px' /><a href='${friend.linkUrl}'>${friend.name}</a>
    			</td>
    		</tr>
    	</c:forEach>
    </table>
     <%@ include file="/WEB-INF/jsp/include/common_script.jsp" %>
    <script type="text/javascript">
    //<![CDATA[
       function postShare(){
           var message = $("#facebook_stream_textarea").val();

           $.ajax({
				type:"POST",
				url:"<c:url value='/sns/facebook/sharepost.do'/>",
				//dataType:"html",
				data:"message="+message,
				success:function(msg){
					$("#facebook_stream_textarea").empty();
					//alert("return message : "+msg);
				}
			});
       }
       function getCommentList(postid){
    	   $.ajax({
				type:"POST",
				url:"<c:url value='/sns/facebook/getcomment.do'/>",
				//dataType:"html",
				data:"postid="+postid,
				success:function(msg){
					$("#"+postid).html(msg);
				}
			});
       }
    //]]>
    </script>
  </body>
</html>